<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>细节 | Triwin</title>
    <meta name="description" content="triwin Web规范">
    <link rel="stylesheet" href="/triwin-web-inline/assets/style.d82f6ee1.css">
    <link rel="modulepreload" href="/triwin-web-inline/assets/Home.7f532832.js">
    <link rel="modulepreload" href="/triwin-web-inline/assets/app.5c149594.js">
    <link rel="modulepreload" href="/triwin-web-inline/assets/VUE3_diff.md.1e05b574.lean.js">
    <link rel="modulepreload" href="/triwin-web-inline/assets/app.5c149594.js">
    <link rel="icon" href="/favicon.ico">
    <meta name="twitter:title" content="细节 | Triwin">
    <meta property="og:title" content="细节 | Triwin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/triwin-web-inline/" aria-label="Triwin, back to home" data-v-675d8756 data-v-4a583abe><!----> Triwin</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/triwin-web-inline/VUE3/" data-v-b8818f8c>文档 <!----></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/triwin-web-inline/VUE3/" data-v-b8818f8c>文档 <!----></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><p class="sidebar-link-item">数据中台前端</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/triwin-web-inline/VUE3/">基本</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/triwin-web-inline/VUE3/vue">代码规范Vue篇</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/triwin-web-inline/VUE3/ts">代码规范TS篇</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/triwin-web-inline/VUE3/diff">细节</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#文件命名">文件命名</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#样式">样式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#字体文件">字体文件</a><!----></li></ul></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h1 id="细节" tabindex="-1">细节 <a class="header-anchor" href="#细节" aria-hidden="true">#</a></h1><p>这一部分，可能和某些部分所说重叠，但是好处是，你不用看那么一堆长篇大论了~ 🤪</p><h2 id="文件命名" tabindex="-1">文件命名 <a class="header-anchor" href="#文件命名" aria-hidden="true">#</a></h2><p>1.文件名必须用大驼峰式如 HelloWorld.vue(ps: 除了index文件)</p><p>2.文件名的意思必须对应功能，比如登录命名为 Login (单词怎么拼，请参考<a href="https://fanyi.baidu.com/#en/zh/" target="_blank" rel="noopener noreferrer">百度翻译</a>)</p><p>3.组件名单个单词命名则必须大写首字母，如</p><div class="language-js"><pre><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&#39;Hello&#39;</span><span class="token punctuation">,</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><p>如果是多单词拼写 组件名也是使用大驼峰</p><div class="language-js"><pre><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&#39;HelloWorld&#39;</span><span class="token punctuation">,</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="样式" tabindex="-1">样式 <a class="header-anchor" href="#样式" aria-hidden="true">#</a></h2><p>1.如果只适用于当前组件页面请必须在style行内加上scoped属性</p><div class="language-js"><pre><code><span class="token operator">&lt;</span>style scoped<span class="token operator">&gt;</span>
<span class="token punctuation">.</span>button <span class="token punctuation">{</span>
  color<span class="token operator">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre></div><p>2.全局公共样式修改处理请移步 <strong>./src/assets/css/_variables.scss</strong> 这个文件夹下处理</p><h2 id="字体文件" tabindex="-1">字体文件 <a class="header-anchor" href="#字体文件" aria-hidden="true">#</a></h2><p>目前字体文件用的 <a href="https://fonts.google.com/icons?selected=Material+Icons" target="_blank" rel="noopener noreferrer">谷歌字体库</a></p><p>用法:</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>material-icons<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>进入官网后的，用法图解</p><p><img src="/triwin-web-inline/iconteach1.jpg" alt="示例1"></p><p><img src="/triwin-web-inline/iconteach2.jpg" alt="示例2"></p></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-fb8d84c6><div class="edit" data-v-fb8d84c6><div class="edit-link" data-v-fb8d84c6 data-v-1ed99556><!----></div></div><div class="updated" data-v-fb8d84c6><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/triwin-web-inline/VUE3/ts" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>代码规范TS篇</span></a></div><div class="next" data-v-38ede35f><!----></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"vue3_diff.md\":\"1e05b574\",\"vue3_index.md\":\"8f5c37c3\",\"vue3_ts.md\":\"22aafe44\",\"vue3_vue.md\":\"d53f90c9\",\"index.md\":\"1651360c\"}")</script>
    <script type="module" async src="/triwin-web-inline/assets/app.5c149594.js"></script>
    
  </body>
</html>